<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form class="form-horizontal" role="form" id="form">
    <div class="form-group">
        <label for="province" class="col-sm-2 control-label">省</label>
        <div class="col-sm-10">
            <div id="province" class="cc-ComboDict" remark="必须选择一样" initValue="500000" model="1"   data-options="'dictCode':'area_code',call:'dict.selectByParent'" style="width: 200px" ></div>
        </div>
    </div>
    <div class="form-group">
        <label for="city" class="col-sm-2 control-label">市</label>
        <div class="col-sm-10">
            <div id="city" class="cc-ComboDict" remark="必须选择一样" initValue="500100" model="1"   multiple="true" panelWidth="350px"  data-options="'dictCode':'area_code',call:'dict.selectByParent','parentId':'province'" style="width: 250px" ></div>
        </div>
    </div>
    <div class="form-group">
        <label for="area" class="col-sm-2 control-label">区</label>
        <div class="col-sm-10">
            <div id="area" class="cc-ComboDict" remark="必须选择一样" initValue="500104"   model="1"  panelHeight="300"  data-options="'dictCode':'area_code',call:'dict.selectByParent','parentId':'city'" style="width: 200px" ></div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="button" value="editModel" onclick="editModel()">
            <input type="button" value="showModel" onclick="showModel()">
            <input type="button" value="setValue" onclick="setValue()">
            <input type="button" value="getAddData" onclick="getAddData()">
            <input type="button" value="getEditData" onclick="getEditData()">
        </div>
    </div>
</form>
 
<script type="text/javascript" src="../lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../lib/layer/layer.js"></script>

<script type="text/javascript" src="../lib/handlebars/handlebars-v4.0.5.js"></script>
<script type="text/javascript" src="../lib/handlebars/handlebars-extend.js"></script>

<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript"  src="../lib/common/common.js"></script>

<link type="text/css" href="../lib/component/css/cc.css" rel="stylesheet" />
<script type="text/javascript"  src="../lib/component/js/cc.js"></script>

<script type="text/javascript">


    $(function(){
      _$.parser.parse()
    });

    function editModel(){
        var name = _$.getById("province");
        name.setModel(1);
    }
    function showModel(){
        var name = _$.getById("province");
        name.setModel(0);
    }
    function setValue(){
        var form = new _$.Form("#form");
        var values = {"name":"aa","realName":"bb","age":20};

        form.setValue(values)
    }
    function getAddData(){

        var form = new _$.Form("#form");
        var values = form.getAddData();
        alert(JSON.stringify(values))
    }
    function getEditData(){

        var form = new _$.Form("#form");
        var values = form.getEditData();
        alert(JSON.stringify(values))
    }
    function reset1(){

        var form = new _$.Form("#form");
        form.reset();
    }
    function clear1(){

        var form = new _$.Form("#form");
        form.clear();
    }
    function isValid(){

        var form = new _$.Form("#form");
        var flag = form.isValid();
        console.log("==================" + flag)
    }

    function destroy(){
        var name = _$.getById("name");
        name.destroy();
        var realName = _$.getById("realName");
        realName.destroy();
        var memo = _$.getById("memo");
        memo.destroy();
        var age = _$.getById("age");
        age.destroy();
    }
</script>
</body>
</html>
